﻿@page
@{ Layout = "_Layout"; }

<div style="height: 10px"></div>
<el-form v-on:submit.native.prevent ref="form1" :model="form" size="small" label-width="120px">
  <el-form-item label="组件名称" prop="title" :rules="{ required: true, message: '请输入组件名称' }">
    <el-input v-model="form.title" style="width: 450px;" placeholder="请输入组件名称"></el-input>
  </el-form-item>
  <el-form-item label="组件说明" prop="description">
    <el-input v-model="form.description" type="textarea" rows="2" placeholder="请输入组件说明"></el-input>
  </el-form-item>
  <el-form-item label="组件参数">
    <el-button size="mini" style="margin-left: 10px" v-on:click="btnAddClick">新 增</el-button>
    <el-form v-on:submit.native.prevent size="small" class="form-fixed" :inline="true" :model="form" ref="form2" label-width="120px">
      <template v-for="(item, index) in form.parameters">
        <el-divider></el-divider>
        <el-form-item :label="'参数' + (index + 1)" :prop="'parameters.' + index + '.key'" :rules="{
          required: true, message: '请输入参数'
        }">
          <el-input v-model="item.key" placeholder="请输入参数"></el-input>
        </el-form-item>
        <el-form-item label="标签：">
          {{ item.key ? '{' + item.key + '}' : '' }}
        </el-form-item>
        <el-form-item>
          <el-button size="mini" style="margin-left: 10px" v-on:click="btnRemoveClick(index)">删 除</el-button>
        </el-form-item>
      </template>
    </el-form>
  </el-form-item>
</el-form>

<el-row>
  <el-col :span="24">
    <el-button type="text" icon="el-icon-brush" v-on:click="btnFormatClick">格式化代码</el-button>
  </el-col>
</el-row>

<div id="content" style="width:99%; border: 1px solid #d7dae2;"></div>

<div style="margin-top: 15px; text-align: center">
  <el-button type="primary" size="small" v-on:click="btnSubmitClick(false)">保 存</el-button>
  <el-button type="success" size="small" v-on:click="btnSubmitClick(true)">保存并关闭</el-button>
  <el-button type="info" size="small" v-on:click="btnCloseClick">关 闭</el-button>
</div>

@section Scripts{
  <script src="/sitefiles/assets/lib/monaco-editor/min/vs/loader.js"></script>
  <script src="/sitefiles/assets/js/admin/cms/materialComponentEditor.js" type="text/javascript"></script>
}